<template>
  <div class="table-box">
    <el-table
      :data="tableData"
      stripe
      border
      style="max-width: 1000px"
      table-layout="auto"
    >
      <el-table-column prop="type" label="待办任务类型" />
      <el-table-column prop="name" label="待办任务名称" />
      <el-table-column prop="time" label="到达时间" />
      <el-table-column fixed="right" label="操作">
        <template #default>
          <el-button size="small" @click="dialogVisible = true">
            查看
          </el-button>
          <el-button size="small" type="danger"> 处理 </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>

  <el-dialog v-model="dialogVisible" title="查看待办事宜" width="500">
    <ul class="detail-box">
      <div><span>任务编号：</span>{{ detail.taskId }}</div>
      <div><span>任务名称：</span>{{ detail.taskName }}</div>
      <div><span>巡检线路：</span>{{ detail.route }}</div>
      <div><span>起始杆号：</span>{{ detail.start }}</div>
      <div><span>终止杆号：</span>{{ detail.end }}</div>
      <div><span>下发人： </span>{{ detail.person }}</div>
      <div><span>下发时间：</span>{{ detail.time }}</div>
      <div><span>备注信息：</span>{{ detail.remark }}</div>
    </ul>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">
          返回
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref } from "vue";

const dialogVisible = ref(false);

const tableData = [
  {
    type: "缺陷管理",
    name: "西渭2线杆塔编号XW0001缺陷等级确认",
    time: "2013-12-23 13:24:14",
  },
  {
    type: "缺陷管理",
    name: "西临1线消缺任务执行",
    time: "2013-12-23 13:24:14",
  },
  {
    type: "缺陷管理",
    name: "西渭2线杆塔编号XW0001缺陷等级确认",
    time: "2013-12-23 13:24:14",
  },
  {
    type: "缺陷管理",
    name: "西渭2线杆塔编号XW0001缺陷等级确认",
    time: "2013-12-23 13:24:14",
  },
];

const detail = ref({
  taskId: "RW0245",
  taskName: "西临1号线巡检",
  route: "西临1号线",
  start: "xw001",
  end: "xw00256",
  person: "线路管理员测试账号01",
  time: "2013-12-11 ",
  remark: "无",
});
</script>

<style scoped>
.table-box {
  width: 1000px;
  margin: 0 auto;
}

.detail-box div {
  margin: 10px 0;
}

.detail-box span {
  font-weight: bold;
}
</style>
